import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    TextInput,
    ScrollView,
    StyleSheet
} from 'react-native';

import {
    Tip,
    Arrow,
    Select,
    Loading,
    AgeRange
} from './../../../components';

import Connect from './../../../utils/connect';
import Options from './../../../const/options';

import {
    Actions
} from 'react-native-router-flux';

import Location from './../../location';
import userAction from './../../../state/actions/user';
import * as userTypes from './../../../state/types/user';

import icon_1 from './../../../images/profile/icon-1.png';
import icon_2 from './../../../images/profile/icon-2.png';
import icon_3 from './../../../images/profile/icon-3.png';
import icon_4 from './../../../images/profile/icon-4.png';

interface State {
    body:any,
    drink:any,
    gender:any,
    height:any,
    aboutMe:any,
    relation:any,
    education:any,
    matchAge:any,
    location:any,
    matchGender:any,
    haveChildren:any,
}

interface Props {
    user:any,
    userActions:any
}

const nativeVal = (a: any, b: any,defaultVal:any=0) => {
    return (a !== undefined ? a : b) || defaultVal;
}

import MeItem from './../components/meItem';

@Connect([`user`],{
    userActions: userAction
})
class Seeking extends PureComponent<Props,State> {
    static defaultProps = {
        user: {},
        userActions: {}
    }

    state = {
        aboutMe:undefined,
        body:undefined,
        drink:undefined,
        height:undefined,
        gender:undefined,
        relation:undefined,
        matchAge:undefined,
        location:undefined,
        education:undefined,
        matchGender:undefined,
        haveChildren:undefined
    }

    get userState() {
        const {
            user
        } = this.props;
        return user;
    }

    get loginUser() {
        const {
            loginUser
        } = this.userState;
        return loginUser;
    }

    get Data() {
        return this.loginUser;
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions || {};
    }

    get about() {
        const {
            aboutme
        } = this.Data;
        return aboutme;
    }

    get gender() {
        const {
            gender = {}
        } = this.Data;
        return gender.id || 0;
    }

    get height() {
        const {
            height = {}
        } = this.Data;
        return height.id || 0;
    }

    get body() {
        const {
            body = {}
        } = this.Data;
        return body.id || 0;
    }

    get education() {
        const {
            education = {}
        } = this.Data;
        return education.id || 0;
    }

    get relation() {
        const {
            relation = {}
        } = this.Data;
        return relation.id || 0;
    }

    get haveChildren() {
        const {
            haveChildren = {}
        } = this.Data;
        return haveChildren.id || 0;
    }

    get drink() {
        const {
            drink = {}
        } = this.Data;
        return drink.id || 0;
    }

    get genderVal() {
        const {
            gender
        } = this.state;
        return nativeVal(
            gender,this.gender
        )
    }

    get heightVal() {
        const {
            height
        } = this.state;
        return nativeVal(
            height,this.height
        )
    }

    get bodyVal() {
        const {
            body
        } = this.state;
        return nativeVal(
            body,this.body
        )
    }

    get aboutVal() {
        const {
            aboutMe
        } = this.state;
        return nativeVal(
            aboutMe,this.about
        )
    }

    get matchGender() {
        const {
            matchGender = []
        } = this.Data;
        return matchGender.map(({id}:any) => id);
    }

    get matchGenderVal() {
        const {
            matchGender
        } = this.state;
        return nativeVal(
            matchGender,
            this.matchGender,[]
        );
    }

    get matchAge() {
        const {
            matchAge
        } = this.Data;
        return matchAge || {};
    }

    get matchAgeVal() {
        const {
            matchAge
        } = this.state;
        return matchAge !== undefined ?
            matchAge:this.matchAge;
    }

    get haveChildrenVal() {
        const {
            haveChildren
        } = this.state;
        return nativeVal(
            haveChildren,
            this.haveChildren
        )
    }

    get ageMin() {
        const {
            min
        } = this.matchAgeVal;
        return min || 18;
    }

    get ageMax() {
        const {
            max
        } = this.matchAgeVal;
        return max || 80;
    }

    get educationVal() {
        const {
            education
        } = this.state;
        return nativeVal(
            education,
            this.education
        )
    }

    get relationVal() {
        const {
            relation
        } = this.state;
        return nativeVal(
            relation,
            this.relation
        )
    }

    get drinkVal() {
        const {
            drink
        } = this.state;
        return nativeVal(
            drink,this.drink
        )
    }

    get matchAgeLabel() {
        return `${this.ageMin} - ${this.ageMax}`;
    }

    get location() {
        const {
            location
        } = this.Data;
        return location || {};
    }

    get locationVal() {
        const {
            location
        } = this.state;
        return nativeVal(
            location,this.location
        )
    }

    get locationLabel() {
        const {
            city,
            state,
            country
        } = this.locationVal;

        const {
            label:cityLabel
        } = city || {};

        const {
            label:stateLabel
        } = state || {};

        const {
            label:countryLabel
        } = country || {};


        return [
            cityLabel,
            stateLabel,
            countryLabel
        ].filter(v=>!!v).join(`/`)

    }

    private openAgeRange = async () => {
        const {
            min,
            max
        } = await (
            AgeRange(
                this.ageMin,
                this.ageMax
            )
        )
        this.setState({
           matchAge:{ min,max }
        })
    }

    private getIds(array: Array<number>): number {
        return [0, ...array].reduce(
            (a, b) => a + b
        )
    }

    private onItemChange = (val: any, type: string) => {
        this.setState({[type]: val} as any);
    }

    private onSuccess = () => {
        Actions.pop()
        Tip.success({
            message:`Save successfully.`
        })
    }

    public onAboutChange = (text:string) => {
        this.setState({
            aboutMe:text
        })
    }

    public openLocation = async () => {
        const res = await Location(
            false,false
        )
        this.setState({
            location:res
        })
    }

    private onSubmit = async () => {
        const para:any = {};
        const {
            body,
            drink,
            aboutMe,
            gender,
            height,
            location,
            matchAge,
            relation,
            education,
            matchGender,
            haveChildren
        } = this.state;

        if(gender!== undefined) {
            para.gender = gender;
        }
        if(height !== undefined) {
            para.height = height;
        }

        if(body !== undefined) {
            para.body = body;
        }

        if(matchGender !== undefined) {
            para.matchGender = this.getIds(
                matchGender || []
            )
        }

        if(matchAge !== undefined) {
            const {
                min,
                max
            } = matchAge || {} as any;
            para.matchAgeMin = min || 18;
            para.matchAgeMax = max || 100;
        }

        if(relation !== undefined) {
            para.relation = relation;
        }

        if(education !== undefined) {
            para.education = education;
        }

        if(drink !== undefined) {
            para.drinker = drink;
        }

        if(location !== undefined) {
            const {
                city,
                state,
                country
            } = location || {} as any;

            const {
                id:cityId
            } = city || {};

            const {
                id:stateId
            } = state || {}

            const {
                id:countryId
            } = country || {}

            para.cityId = cityId;
            para.stateId = stateId;
            para.countryId = countryId;
        }

        if(haveChildren !== undefined) {
            para.haveChildren = haveChildren;
        }

        if(aboutMe !== undefined) {
            para.about = aboutMe;
        }

        if(!Object.keys(para).length) {
            return Actions.pop();
        }

        Loading.show();

        try {
            await this.userActions[
                userTypes.setUserProfile
            ](para);
            this.onSuccess();
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }
        Loading.close();
    }

    render() {
        return (
            <ScrollView style={styles.container}>
                <MeItem icon={icon_1}>
                    <Select
                        type="gender"
                        placeholder="Gender"
                        value={this.genderVal}
                        options={Options.gender}
                        onChange={this.onItemChange}
                    />
                    <Select
                        type="height"
                        placeholder="Height"
                        value={this.heightVal}
                        options={Options.height}
                        onChange={this.onItemChange}
                    />
                    <Select
                        type="body"
                        value={this.bodyVal}
                        options={Options.body}
                        placeholder="Body type"
                        onChange={this.onItemChange}
                    />
                </MeItem>
                <MeItem icon={icon_2}>
                    <Select
                        type="matchGender"
                        placeholder="Seeking"
                        options={Options.gender}
                        value={this.matchGenderVal}
                        onChange={this.onItemChange}
                    />
                    <Arrow
                        title="Age from"
                        value={this.matchAgeLabel}
                        onPress={this.openAgeRange}
                    />
                </MeItem>
                <MeItem icon={icon_3}>
                    <Select
                        type="education"
                        placeholder="Education"
                        options={Options.education}
                        value={this.educationVal}
                        onChange={this.onItemChange}
                    />
                    <Select
                        type="relation"
                        placeholder="Relationship"
                        value={this.relationVal}
                        options={Options.relationship}
                        onChange={this.onItemChange}
                    />
                    <Select
                        type="haveChildren"
                        placeholder="Have children"
                        options={Options.children}
                        value={this.haveChildrenVal}
                        onChange={this.onItemChange}
                    />
                    <Select
                        type="drink"
                        placeholder="Drinking"
                        options={Options.drinking}
                        value={this.drinkVal}
                        onChange={this.onItemChange}
                    />
                </MeItem>
                <MeItem icon={icon_4}>
                    <Arrow
                        title="Country"
                        value={this.locationLabel}
                        onPress={this.openLocation}
                    />
                </MeItem>
                <View style={styles.aboutStyle}>
                    <Text style={styles.aboutTitle}>
                        Introduce yourself
                    </Text>
                    <View style={styles.aboutContent}>
                        <TextInput
                            multiline={true}
                            value={this.aboutVal}
                            style={styles.aboutInput}
                            onChangeText={this.onAboutChange}
                        />
                    </View>
                </View>
            </ScrollView>
        )
    }
}

export default Seeking;

const styles = StyleSheet.create({
    buttonStyle:{
        paddingVertical:24,
        paddingHorizontal:16
    },
    container:{
        flex:1,
        marginBottom:16,
        marginHorizontal:16,
        paddingHorizontal:16,
        backgroundColor:`#fff`,
        borderBottomLeftRadius:8,
        borderBottomRightRadius:8
    },
    aboutContent:{
        height:150,
        borderRadius:6,
        paddingHorizontal:6,
        backgroundColor:`#f2f2f2`
    },
    aboutInput:{
        flex:1,
        fontSize:15,
        color:`#333`,
        textAlignVertical:`top`
    },
    aboutStyle:{
        paddingBottom:16
    },
    aboutTitle:{
        fontSize:15,
        color:`#333`,
        paddingTop:8,
        paddingBottom:20,
        fontWeight:`bold`
    }
}) as any;